@import './../../config/params.less';

.filterMenu {

    .fixed {
        // position: fixed;
        left: 0;
        // top: 84px !important;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .6);
        z-index: 5;
    }

    .menu {
        display: flex;
        align-items: center;
        height: 90px;
        background-color: #fff;
        justify-content: space-between;

        .item {
            // flex: 1;
            display: flex;
            align-items: center;
            // justify-content: center;
            height: 100%;

            .text {
                margin-right: 10px;
                font-size: 28px;
                line-height: 28px;
                color: #999;
                margin-left: 40px
            }

            .icon {
                width: 0;
                height: 0;
                border-width: 10px 6px 0;
                border-style: solid;
                border-color: #999 transparent transparent;
            }
        }

        .current {
            .text {
                color: #333;
            }

            .icon {
                border-width: 0 6px 10px;
                border-color: transparent transparent #333;
            }
        }
    }

    .fake {
        position: relative;
        box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.05);
        z-index: 2;

        .item {
            .text {
                color: #333;
            }

            .icon {
                border-color: #333 transparent transparent;
            }
        }
    }

    .menu-sub {
        display: flex;
        // max-height: 860px;
        border-top: solid 1px #f8f8f8;
        background-color: #fff;
    }

    .menu-sub-1 {
        flex: 1;
        background-color: #f8f8f8;
        overflow-y: auto;

        .item {
            padding: 0 40px;
        }

        .current {
            background-color: #fff;

            .text {
                position: relative;
                color: #333;

                &::before {
                    content: "";
                    position: absolute;
                    left: -20px;
                    top: 50%;
                    width: 6px;
                    height: 26px;
                    background-color: @themeColor;
                    transform: translateY(-50%);
                }
            }
        }
    }

    .menu-sub-1 .item,
    .menu-sub-2 .item {
        display: flex;
        align-items: center;
        height: 86px;
        font-size: 28px;
        color: #999;
    }

    .menu-sub-2 {
        width: 376px;
        background-color: #fff;
        overflow-y: auto;

        .item {
            padding: 0 20px;
        }

        .current {
            color: #333;
        }
    }

    .fliterJobList--fixed {
        position: fixed;
        top: 400px;
        z-index: 99;
    }

}